<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // this的指向问题： 就是一个变量，函数调用的是动态产生的
      // this的值：1. 谁调用这个函数，函数内部的this就指向谁  2. 构造函数内部的this值等于new出来的对象  3. 箭头函数内部没有this值，使用的上层作用域的this值

      // 场景1： 普通函数调用 --- this就等于window
      function fn(count) {
        let a = 10;
      }

      fn(10);

      // 场景二： 对象里面的方法调用 --- this等于调用函数的对象
      var myname = '荆轲';
      const obj = {
        myname: '鲁班',
        // getName: function() {},
        getName() {
          console.log(this.myname);
        },
      };
      obj.getName(); // 这个函数写法，等价于 this === obj
      const fn2 = obj.getName;
      fn2(); // 在全局这么调用函数 等价于 window.fn2()  等到这个时候fn2函数里面的 this === window

      // 场景三： 定时器里面的函数调用 ---  this等于window
      // 定时器的函数，是固定的时间间隔以后，由系统自动调用的，系统的顶级变量就是window
      setTimeout(() => {
        console.log(this);
      }, 1000);

      // 场景四：构造函数里面的this值 ----- this等于new出来的对象
      function Person(name) {
        this.name = name;
      }
      const p1 = new Person('李白');
      const p2 = new Person('杜甫');
      console.log(p1);
      console.log(p2);

      // 场景5： 箭头函数的this值
      const obj2 = {
        myname: '箭头',
        getName1: function () {
          console.log(1, this.myname);
        },
        getName2: () => {
          // 这里面没有this值，访问的this是上一层作用域的this值，这个函数的上层作用域就是window
          console.log(2, this.myname);
        },
      };
      obj2.getName1();
      obj2.getName2();
    </script>
  </body>
</html>
